Help:Installing Widgets

Search WikiTree's help pages:

Categories: WikiTree Help | Social Media and Sharing Help

Language: en | de | fr

How do you add a WikiTree widget to your blog?

Contents

How to Use Family Tree Widgets on Your Blog

Family Tree Widgets work best when embedded in blog posts rather than in the sidebar of your blog, due to the width needed to properly display your WikiTree content. For sidebar widgets that let you show off your WikiTree contributions, see Contributions Widgets.

Blogger

  1. Go to any WikiTree profile with a Privacy Level of "Private with a Public Family Tree" or higher and click the Tree Apps tab
  2. Select the "Other Apps" option and scroll down for the "Tree Widgets" link.
  3. Scroll down to where the HTML code is displayed in the box labeled Copy-and-paste this HTML code.
  4. Highlight the text in the box, right-click with your mouse and select Copy.
  5. In Blogger, under the Posting tab, click New Post.
  6. Click on the Edit HTML tab[1] and then in the Content area, right-click with your mouse and select Paste.
  7. Click the Compose tab to see how your widget will appear in the blog post.
  8. Click Publish.

WordPress

  1. Go to any WikiTree profile with a Privacy Level of "Private with a Public Family Tree" or higher and click the Tree Apps tab
  2. Select the "Other Apps" option and scroll down for the "Tree Widgets" link.# Scroll down to where the HTML code is displayed in the box labeled Copy-and-paste this HTML code.
  3. Highlight the text in the box, right-click with your mouse and select Copy.
  4. In WordPress, login and go to the Dashboard.
  5. Scroll down to the Posts section in the left sidebar, expand the list and select New Post.
  6. Click on the HTML tab and then in the Content area, right-click with your mouse and select Paste.
  7. Click the Visual tab to see how your widget will appear in the blog post.
  8. Click Publish. 

How to Use Contributions Widgets on Your Blog

For the selection of Contributions Widgets, click the link near the top of your Contributions page.

These work best when embedded in a blog sidebar rather than in a blog post since they were created to always be displayed on your blog to let your visitors know about your WikiTree contributions. For widgets that let you show off a family tree, see Family Tree Widgets.

Blogger

  1. Click the Contributions Widgets link on your Contributions page to see the variety of widgets available.
  2. Scroll down to where the HTML code is displayed in any box labeled Copy-and-paste this HTML code.
  3. Highlight the text in the box, right-click with your mouse and select Copy.
  4. In Blogger, under the Design tab, click Add a Gadget.
  5. Scroll through the Basics gadgets and select HTML/JavaScript. The Configure HTML/JavaScript dialog appears.
  6. In the Title field, enter a title if desired. In the Content area, right-click with your mouse and select Paste.
  7. Click Save. Click View Blog tab to see how your widget will appear in the sidebar of your blog.

See an example of a Contribution Widget on the sidebar of Sheri Bush's blog Twig Talk.

WordPress

  1. Click the Contributions Widgets link. For the selection of Contributions Widgets, click the link near the top of your Contributions page.
  2. Scroll down to where the HTML code is displayed in any box labeled Copy-and-paste this HTML code
  3. Highlight the text in the box, right-click with your mouse and select Copy
  4. In WordPress, login it should take you to My Home
  5. Scroll down to the Customize section in the left sidebar
  6. Click Widgets
  7. Click Sidebar
  8. Click Add a Widget
  9. Click Custom HTML Code
  10. In the Title field, enter a title if desired
  11. In the Content area, right-click with your mouse and select Paste
  12. Next, you will need to remove the code starting from <iframe to </iframe> (WordPress no longer supports iframes unless you have a "Premium" plan
  13. Click Save
  14. Click the link to Visit Site in the upper right-hand of My Home to view your blog and see how your widget appears in the sidebar of your blog.

See an example of a Contribution Widget on the sidebar of the blog AzureRae on WordPress.

How to Use Widgets on Joomla

Thank you to Edison Williams for posting the following in G2G.

On any recent version of Joomal! 3.x or newer, you can easily use WikiTree widgets in articles or modules. Note that installations may differ in the editing permissions some Joomla! groups may have, so it's always best log-in with an account that has Super User privileges. This will assure that no HTML code is stripped away when you save your work.

To use in an article:

  1. Open the Joomla! Administrator backend.
  2. Go to Content -> Articles.
  3. Select and open an existing article, or create a new one.
  4. Copy the WikiTree widget code and paste it into the article.
  5. Check the Status, Category, and Options for your article.
  6. Click Save & Close.

To use in a module:

  1. Open the Joomla! Administrator backend.
  2. Go to Extensions -> Modules.
  3. Select New, and choose Custom as the module type.
  4. Copy the WikiTree widget code and paste it into the body of the module.
  5. Enter a title for the module, choose whether to display or hide the title, and check that the Status is set to Published.
  6. Select a module position for the module. Available positions are determined by the template you are using.
  7. Click on the tab labeled Menu Assignment and choose on which page(s) you want the module to appear.
  8. Click Save & Close.

How to Use Widgets on Google Sites

  1. Edit the page where you want to add the widget.
  2. Select Insert -> More Gadget.
  3. Search for 'iframe'.
  4. Select the Include Gadget (iframe) by Scott Johnston.
  5. Enter the URL in the widget code (the src field in the <iframe> tag) in the URL to content entry field.
  6. Set the Width and Height so that the content fits (550x520 for the Family Tree widget).
  7. Enter a title in the Display title on gadget entry field or disable the title.
  8. Click the OK button.

Notes

If you need more help, don't hesitate to post a question in our G2G forum.

  1. ↑ If you do not see the Edit HTML and Compose tabs, you may not be using the Updated Editor in Blogger. On the Settings tab, click on Basic and scroll down to the Global Settings section. Under Select post editor, select Updated editor and then click Save Settings.


This page was last modified 21:34, 26 January 2023. This page has been accessed 12,172 times.